<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="https://unpkg.com/@antv/l7"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .poniter {
        width: 10px;
        height: 10px;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        font-size: 20px;
        color: red;
        z-index: 99999;
        margin: auto;
        /* background-color: red; */
      }
    </style>
  </head>
  <body>
    <div id="map" style="width: 100vw; height: 100vh"></div>
    <div class="poniter"></div>
    <script>
      // const scene = new L7.Scene({
      //   id: "map",
      //   map: new L7.Mapbox({
      //     style: "mapbox://styles/mapbox/streets-v12", // 样式URL
      //     center: [108.964646, 34.214892],
      //     pitch: 0,
      //     zoom: 12,
      //     token:
      //       "pk.eyJ1IjoibGl1c2hhb2Zlbmc4OSIsImEiOiJjbGd3MDhoNG8wYmp3M3BwZnRodzZwdmtxIn0.Q45u_8abEFxJ1K1ibauQoA",
      //     // token: 'pk.eyJ1IjoibGl1c2hhb2Zlbmc4OSIsImEiOiJjbGd3MDhoNG8wYmp3M3BwZnRodzZwdmtxIn0.Q45u_8abEFxJ1K1ibauQoA' 刘少峰的token
      //     language: "zh-Hans",
      //   }),
      // });

      // fetch(
      //   "https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json"
      // )
      //   .then((res) => res.json())
      //   .then((data) => {
      //     const pointLayer = new L7.PointLayer({})
      //       .source(data.list, {
      //         parser: {
      //           type: "json",
      //           x: "j",
      //           y: "w",
      //         },
      //       })
      //       .shape("cylinder")
      //       .size("t", function (level) {
      //         return [1, 2, level * 2 + 20];
      //       })
      //       .color("t", [
      //         "#094D4A",
      //         "#146968",
      //         "#1D7F7E",
      //         "#289899",
      //         "#34B6B7",
      //         "#4AC5AF",
      //         "#5FD3A6",
      //         "#7BE39E",
      //         "#A1EDB8",
      //         "#CEF8D6",
      //       ])
      //       .style({
      //         opacity: 1.0,
      //       });
      //     scene.addLayer(pointLayer);
      //   });

      // let map = scene.map;
      // mapboxgl.accessToken =
      //   "pk.eyJ1IjoibGl1c2hhb2Zlbmc4OSIsImEiOiJjbGd3MDhoNG8wYmp3M3BwZnRodzZwdmtxIn0.Q45u_8abEFxJ1K1ibauQoA";
      // const map = new mapboxgl.Map({
      //   container: "map", // container ID
      //   style: "mapbox://styles/mapbox/streets-v12", // style URL
      //   center: [108.946466, 34.347269], // starting position [lng, lat]
      //   zoom: 14, // starting zoom
      // });
    </script>
  </body>
</html>
